<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>页面布局</title>
<link rel="stylesheet" href="../../Content/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../Content/css/font-awesome.min.css" />
<link rel="stylesheet" href="../../Content/css/mycss.css" />
</head>

<body >
<div class="container-fluid">
    <h3>常规页面布局---单行单列</h3>
    
    <div class=" mylist">
        <table class=" table table-bordered table-hover table-striped" cellpadding="0" cellspacing="0" border="0">
            <thead>  
                <tr>  
                    <th width="200">操作</th>  
                    <th width="100">序号</th>  
                    <th width="300">类别</th>   
                </tr>  
            </thead>
            <tbody>  
                <tr>  
                    <td><a href="#"><span class="glyphicon glyphicon-pencil"></span></a><a href="#"><span class="glyphicon glyphicon-trash"></span></a></td>
                    <td>001</td>
                    <td>未知</td>
                     
                </tr>  
                <tr>  
                    <td><a href="#"><span class="glyphicon glyphicon-pencil"></span></a><a href="#"><span class="glyphicon glyphicon-trash"></span></a></td>
                    <td>001</td>
                    <td>未知</td>
                </tr> 
            </tbody>
        </table>
    </div>
   	<h3>Code</h3>
    <div>
    	<pre>
        	<code>
                &lt;!--内容区域--&gt;
                &lt;div class="container-fluid"&gt;
                    &lt;!--内容更具实际情况而定，可以是表格，也可以是表单--&gt;
                    &lt;!--红色部分是为表格定义使用，如过内容不是表格此样式可不加--&gt;
                    &lt;div class="<font color="red">mylist</font>"&gt;
                        &lt;table  class=" table table-bordered table-hover table-striped" cellpadding="0" cellspacing="0" border="0"&gt;
                            ...
                        &lt;/table&gt;
                    &lt;/div&gt;
                    
                &lt;/div&gt;
            </code>
        </pre>
    </div>
    <hr />
    <h3>单行两列布局</h3>
    <div class="container-fluid">
    	<div class="col-md-6">
        	<div class="form-horizontal">
            	<ul class="col-md-12 list-unstyled">
                	<li class="col-md-6">
                        <div class="form-group">
                            <label class="col-md-4 control-label">字段一</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" />
                            </div>
                        </div>
                    </li>
                    <li class="col-md-6">
                        <div class="form-group">
                            <label class="col-md-4 control-label">字段二</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" />
                            </div>
                        </div>
                    </li>
                     <li class="col-md-6">
                        <div class="form-group">
                            <label class="col-md-4 control-label">字段三</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" />
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-6">
        	<div class="mylist">
            	<table class=" table table-bordered table-hover table-striped" cellpadding="0" cellspacing="0" border="0">
                	<thead>  
                        <tr>  
                            <th width="200">操作</th>  
                            <th width="100">序号</th>  
                            <th width="300">类别</th>   
                        </tr>  
                    </thead>
                    <tbody>
                    	<tr>  
                            <td><a href="#"><span class="glyphicon glyphicon-pencil"></span></a><a href="#"><span class="glyphicon glyphicon-trash"></span></a></td>
                            <td>001</td>
                            <td>未知</td>   
                        </tr>  
                        <tr>  
                            <td><a href="#"><span class="glyphicon glyphicon-pencil"></span></a><a href="#"><span class="glyphicon glyphicon-trash"></span></a></td>
                            <td>001</td>
                            <td>未知</td>
                        </tr>  
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <h3>Code</h3>
    <div>
    	<pre>
        	<code>
                &lt;div class="container-fluid"&gt;
                    &lt;!--列1--&gt;
                    &lt;div class="col-md-6"&gt;
                        &lt;!--实际内容根据实际内容填充--&gt;
                        &lt;!--实例内容：表单--&gt;
                        &lt;div class="form-horizontal"&gt;
                            &lt;ul&gt;
                                &lt;!--内容略--&gt;
                            &lt;/ul&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;!--列2--&gt;
                    &lt;div class="col-md-6"&gt;
                        &lt;!--实际内容根据实际内容填充--&gt;
                        &lt;!--实例内容：表格--&gt;
                        &lt;div class="mylist"&gt;
                            &lt;table class=" table table-bordered table-hover table-striped" cellpadding="0" cellspacing="0" border="0"&gt;
                                &lt;!--内容略--&gt;
                            &lt;/table&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            </code>
        </pre>
    </div>
    <hr />
    <h3>组合布局---多行多列</h3>
   	<div class="container-fluid">
    	<div class="search-bar">
            <div class="col-md-4">
                <a href="#" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span>新增&nbsp;</a>
                <a href="#" class="btn btn-delete"><span class="glyphicon glyphicon-remove"></span> 批量删除</a>
            </div>
            <div class="col-md-8 text-right form-inline">
                <input type="text" class="form-control" placeholder="请输入" data-original-title="" title="">
                <input type="text" class="form-control" placeholder="请输入" data-original-title="" title="">
                <button class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> 查询</button>
                <button class="btn  btn-success"><span class="glyphicon glyphicon-search"></span> 高级查询</button>
            </div>
        </div>
        <div class="container-fluid mylist">
            <table class=" table table-bordered table-hover table-striped" cellpadding="0" cellspacing="0" border="0">
                <thead>  
                    <tr>  
                        <th width="200">操作</th>  
                        <th width="100">序号</th>  
                        <th width="300">类别</th>   
                    </tr>  
                </thead>
                <tbody>  
                    <tr>  
                        <td><a href="#"><span class="glyphicon glyphicon-pencil"></span></a><a href="#"><span class="glyphicon glyphicon-trash"></span></a></td>
                        <td>001</td>
                        <td>未知</td>
                         
                    </tr>  
                    <tr>  
                        <td><a href="#"><span class="glyphicon glyphicon-pencil"></span></a><a href="#"><span class="glyphicon glyphicon-trash"></span></a></td>
                        <td>001</td>
                        <td>未知</td>
                    </tr> 
                </tbody>
            </table>
        </div>
        
        <div class="page-bar">
            <div class="col-md-3 list-nameber">总计23条记录，当前为1-20条</div>
            <div class="col-md-9 text-right form-inline">
                  <ul class="pagination">
                  <li><a href="#">«</a></li>
                  <li class="active"><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
                  <li><a href="#">»</a></li>
                </ul>
                
                    <div class="input-group">
                      <input type="text" class="form-control" placeholder="转到第几页？" data-original-title="" title="">
                      <span class="input-group-btn">
                        <button class="btn btn-success" type="button">转到</button>
                      </span>
                     
                    </div>
                    <div class="input-group">
                   <select class="form-control" style="display:table-cell">
                        <option>10</option>
                        <option>20</option>
                        <option>30</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
    <h3>Code</h3>
    <div>
    	<pre>
        	<code>
                &lt;!--内容区域--&gt;
                &lt;div class="container-fluid"&gt;
                    &lt;!--实例放的内容，具内容根据实际情况而定--&gt;
                    &lt;!--第一行，红色背景部分--&gt;
                    &lt;!--此行内容分为两列 --&gt;
                   <span style="background-color:red"> &lt;div class="search-bar"&gt;
                        &lt;!--第一行第一列--&gt;
                        &lt;div class="col-md-4"&gt;
                            &lt;a href="#" class="btn btn-success"&gt;&lt;span class="glyphicon glyphicon-plus"&gt;&lt;/span&gt;新增&nbsp;&lt;/a&gt;
                            &lt;a href="#" class="btn btn-delete"&gt;&lt;span class="glyphicon glyphicon-remove"&gt;&lt;/span&gt;批量删除&lt;/a&gt;
                        &lt;/div&gt;
                        &lt;!--第一行第二列--&gt;
                        &lt;div class="col-md-8 text-right form-inline"&gt;
                            &lt;input type="text" class="form-control" placeholder="请输入" data-original-title="" title=""&gt;
                            &lt;input type="text" class="form-control" placeholder="请输入" data-original-title="" title=""&gt;
                            &lt;button class="btn btn-primary"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span> 查询&lt;/button&gt;
                            &lt;button class="btn  btn-success"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span> 高级查询&lt;/button&gt;
                        &lt;/div&gt;
                    &lt;/div&gt; </span>
                    &lt;!--第二行，绿色背景部分--&gt;
                    <span style="background-color:#0F0">&lt;div class="container-fluid mylist"&gt;
                        &lt;table class=" table table-bordered table-hover table-striped" cellpadding="0" cellspacing="0" border="0"&gt;
                            &lt;thead&gt; 
                                &lt;tr&gt;  
                                    &lt;th width="200"&gt;操作&lt;/th&gt;  
                                    &lt;th width="100"&gt;序号&lt;/th&gt; 
                                    &lt;th width="300"&gt;类别&lt;/th&gt;
                                &lt;/tr&gt; 
                            &lt;/thead&gt;
                            &lt;tbody&gt; 
                                &lt;tr&gt;
                                    &lt;td&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;&lt;/a&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/td&gt;
                                    &lt;td&gt;001&lt;/td&gt;
                                    &lt;td&gt;未知&lt;/td&gt;
                                &lt;/tr&gt;
                                &lt;tr&gt; 
                                    &lt;td&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-pencil"&gt;&lt;/span&gt;&lt;/a&gt;&lt;a href="#"&gt;&lt;span class="glyphicon glyphicon-trash"&gt;&lt;/span&gt;&lt;/a&gt;&lt;/td&gt;
                                    &lt;td&gt;001&lt;/td&gt;
                                    &lt;td&gt;未知&lt;/td&gt;
                                &lt;/tr&gt; 
                            &lt;/tbody&gt;
                        &lt;/table&gt;
                    &lt;/div&gt; </span>
                    &lt;!--第三行，黄色背景部分--&gt;
                    &lt;!--此行内容分为两列 --&gt;
                    <span style="background-color:#FF0">&lt;div class="page-bar"&gt;
                    	&lt;!--第三行第一列--&gt;
                        &lt;div class="col-md-3 list-nameber"&gt;总计23条记录，当前为1-20条&lt;/div&gt;
                        &lt;!--第三行第二列--&gt;
                        &lt;div class="col-md-9 text-right form-inline"&gt;
                            &lt;ul class="pagination"&gt;
                                &lt;li&gt;&lt;a href="#"&gt;«&lt;/a&gt;&lt;/li&gt;
                                &lt;li class="active"&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="#"&gt;»&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                            &lt;div class="input-group"&gt;
                                &lt;input type="text" class="form-control" placeholder="转到第几页？" data-original-title="" title=""&gt;
                                &lt;span class="input-group-btn"&gt;
                                &lt;button class="btn btn-success" type="button"&gt;转到&lt;/button&gt;
                                &lt;/span&gt;
                            &lt;/div&gt;
                            &lt;div class="input-group"&gt;
                                &lt;select class="form-control" style="display:table-cell"&gt;
                                    &lt;option&gt;10&lt;/option&gt;
                                    &lt;option&gt;20&lt;/option&gt;
                                    &lt;option&gt;30&lt;/option&gt;
                                &lt;/select&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;</span>
                &lt;/div&gt;
            </code>
        </pre>
    </div>
</div>

</body>
</html>
